<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

.hotline24
 {
 width:100px; height:30px;border-radius: 5px; background:#009FCC ; line-height :17px; text-align:center; color:#fff ;font-size :13px;
 }
 
 .hotline25
 {
 width:100px; height:30px;border-radius: 5px; background:#BB5500 ; line-height :17px; text-align:center; color:#fff ;font-size :13px;
 }
	 
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>添加快递员区域</title>

<script type="text/javascript">

/**
 * 获取区域的数据
 */
$(function(){
	$.ajax({
		type : 'post',
		url :'<%=basePath%>getCourierMapAreasAction',
		success : function(data) {
			initMapAreas(data);
		}
	});
});


/**
 * 根据返回的data加载地图区域
 */
function initMapAreas(Areadata) {
	var thisNetsiteId = <%=request.getAttribute("supportID")%>;
	var color;  //多变性边框颜色
	var json = JSON.parse(Areadata);
	//定义地图
	for(var i=0;i<json.length;i++){   //循环每一个快递员
		var viewA = JSON.parse(json[i].courierMap);
		var thisId = json[i].id;
		if(thisId==thisNetsiteId){ //定位到当前编辑的快递员
			color = "#BB5500";
			if(""!=viewA){
				var panPoint=new BMap.Point(viewA[0][0].lng,viewA[0][0].lat); 
				map.panTo(panPoint); //获取当前快递员第一个区域第一个点，地图中心视野平移到该点
				//把之前数据库已经有的数据，添加至向后台传的参数areas中
				for(var j=0;j<viewA.length;j++){ //循环当每个区域
					addOldPloygon(viewA[j]); //每个区域都加入areas参数中
				}
			}
		}else{
			color = "blue";
		}
		viewtheseAreas(viewA,map,color);
	}
}


//显示其他的区域，并且固定
function viewtheseAreas(pointsData,map,color) {
	for (var i = 0; i < pointsData.length; i++) { //循环每一个区域
		var viewPoint; //定义显示的点坐标
		var viewPointsArr = new Array(); //定义存放点的数组，数组用于给
		for (var j = 0; j < pointsData[i].length; j++) {//每一个区域的点坐标拿到放在数组viewPointsArr里面
			var lng = pointsData[i][j].lng;
			var lat = pointsData[i][j].lat;
			viewPoint = new BMap.Point(lng, lat);
			viewPointsArr.push(viewPoint);
		}
		var viewPloygon; //定义显示的多边形
		viewPloygon = new BMap.Polygon(viewPointsArr);
		viewPloygon.setStrokeWeight(2);
		viewPloygon.setStrokeColor(color); //设置多边形颜色
		viewPloygon.setFillOpacity(0.2); 
		map.addOverlay(viewPloygon);
		viewPloygon.disableMassClear();
		viewPointsArr.length = 0;
	}
} 




/**
 * 数据库的多边形拿到，放在areas参数中，用于这次添加
 */
function addOldPloygon(pointsData){
		var oldPoint; //定义显示的点坐标
		var oldPointsArr = new Array(); //定义存放点的数组，数组用于给
		for (var j = 0; j < pointsData.length; j++) {//每一个区域的点坐标拿到放在数组viewPointsArr里面
			var lng = pointsData[j].lng;
			var lat = pointsData[j].lat;
			oldPoint = new BMap.Point(lng, lat);
			oldPointsArr.push(oldPoint);
		}
		var oldPloygon; //定义显示的多边形
		oldPloygon = new BMap.Polygon(oldPointsArr);
		var oldPolygonPath = oldPloygon.getPath();//获取多边形覆盖物的边的点坐标
		areas.push(oldPolygonPath); // 点对象加入数组前后台交互参数中
}










	//定义地图
	var map = new BMap.Map("myMap"); // 创建Map实例
	var centerPoint = new BMap.Point(121.485966, 31.239957); //初始化地图，中心点为上海中心点
	map.centerAndZoom(centerPoint, 13); // 初始化地图,设置中心点坐标和地图级别
	//设置左上角控件，地图缩放类型
	var opts = {
		type : BMAP_NAVIGATION_CONTROL_SMALL
	};
	map.addControl(new BMap.NavigationControl(opts)); //添加左上角缩放控件 
	map.enableScrollWheelZoom(); //可滚动缩放
	map.disableDoubleClickZoom(); //关`闭双击放大
	//定义覆盖物变量
	var newpoint; //一个经纬度
	var areas = new Array(); //数组，存放多个多边形区域，每一个为一个元素，用来传值给后台
	var points = new Array(); //数组，放经纬度信息,用来绘制多边形
	var polyline = new BMap.Polyline(); //折线覆盖物
	polyline.setStrokeColor("#BB5500");
	polyline.setStrokeWeight(0.1);
	var polygon; // 一个多边形覆盖物
	var polygonArr = new Array(); //添加的覆盖物数组，禁用编辑按钮的时候，把该数组的所有元素覆盖物都禁用

	//添加地图单击事件，绘制折线
	map.addEventListener("click", function(e) { //单击地图，形成折线覆盖物	
		newpoint = new BMap.Point(e.point.lng, e.point.lat);
		points.push(newpoint); //将新增的点放到数组中 
		polyline.setPath(points); //设置折线的点数组 
		map.addOverlay(polyline); //将折线添加到地图上 
	});
	//添加地图双击事件，通过折线取到的点，绘制多边形覆盖物
	map.addEventListener("dblclick", function(e) { //双击地图，形成多边形覆盖物
		polygon = new BMap.Polygon(points);
		polygon.setStrokeColor("#BB5500"); //设置多边形颜色
		polygon.setStrokeWeight(3);
		map.addOverlay(polygon); //将折线添加到地图上
		polygon.enableEditing(); //开启线编辑功能    
		polygonArr.push(polygon);
	});

	//完成添加区域，获取多边形覆盖物的边的点坐标
	function finishOneArea() {
		alertMsg.warn('锁定完成！');
		polygon.disableMassClear(); //禁止该区域被清除
		var polygonPath = polygon.getPath();//获取多边形覆盖物的边的点坐标
		areas.push(polygonPath); // 点对象加入数组前后台交互参数中
		resetArea();
		//关闭多边形线编辑功能
		for (var i = 0; i < polygonArr.length; i++) {
			polygonArr[i].disableEditing();
		}
	}
	
	//删除多边形覆盖物
	function removeArea() {
		resetArea();
		map.clearOverlays();
	}

	//重置对象
	function resetArea() {
		points.length = 0; //重置绘制多边形的点的数组	
	}

	/**
	 *  把一个点转换为JSON字符串形式
	 *  {lng:123.45,lat:23.6533}
	 */
	function pointToJsonStr(obj) {
		var pstr = '';
		pstr = '{' + '"lng":' + obj.lng + ',"lat":' + obj.lat + '}';
		return pstr;
	}

	/**
	 *  把多个点，即一个区域
	 *  (参数为一个数组，数组的每一个元素为一个点)
	 *  转换为JSON对象数组字符串形式
	 *  [{lng:123.45,lat:23.6533},{....},{.....}]
	 */
	function pointArrayToJsonStr(arrObj) {
		var astr = '[';
		for (var i = 0; i < arrObj.length; i++) { //循环每一个点
			if (i != 0) {
				astr += ',';
			}
			var pstr = pointToJsonStr(arrObj[i]);
			astr += pstr;
		}
		astr += ']';
		return astr;
	}

	/**
	 *  把多个区域组成一个JSON数组A
	 *  参数为前面定义的areas
	 *  每一个A的元素为一个嵌套在A中的数组B，B即为一个区域
	 *  [  [{lng:123.45,lat:23.6533},{....},{.....}]  ,  [{lng:123.45,lat:23.6533},{....},{.....}]  ]
	 */
	function AreaArrayToJsonStr() {
		var areaArrObj = areas;
		var asstr = '[';
		for (var i = 0; i < areaArrObj.length; i++) {
			if (i != 0) {
				asstr += ',';
			}
			var astr = pointArrayToJsonStr(areaArrObj[i]);
			asstr += astr;
		}
		asstr += ']';
		return asstr;
	}

	/**
	 * 确认添加这些区域
	 * 参数为为areas
	 * 获取新添加的区域，格式为JSON数组嵌套的字符串格式
	 */
	function addTheseAreas() {
		var jsonStr = AreaArrayToJsonStr();
		$("#addCourierMap_hidden_mapjson").val(jsonStr);
	}
	
	
	/**
	* 自定义回调函数
	*/
	function ensureValidateCallback(obj,navTabAjaxDone){
		alertMsg.confirm("确认已经锁定要保存的所有区域！", {
			okCall: function(){
				addTheseAreas();
				return validateCallback(obj, navTabAjaxDone);
			}
		});
		return false;
	}
</script>

</head>
<body>
	<div class="pageContent">
			<div class="panelBar">
					<ul class="toolBar">
						<li><input type="button" value="锁定绘制区域" onclick="finishOneArea();" class="hotline24"></li>
						<li class="line">line</li>
						<li><input type="button" value="重新绘制区域" onclick="removeArea();" class="hotline25"></li>
						<li class="line">line</li>
					</ul>
				</div>
		<form class="pageForm required-validate" method="post" action="addCourierMapAction.action" onsubmit="return ensureValidateCallback(this, navTabAjaxDone);">
			<input type="hidden" name="rightId" value="${rightId}" /><input type="hidden" name="id" value="${supportID}" />
			<input id="addCourierMap_hidden_mapjson" name="courierMap" type="hidden">
			<div class="pageFormContent" layoutH="86">

				<div id="myMap" style="width: 900px; height: 550px;"></div>

			</div>
			<div class="formBar">
				<ul>
					<li>
						<div class="buttonActive">
							<div class="buttonContent">
								<button type="submit">保存</button>
							</div>
						</div>
					</li>
					<li>
						<div class="button">
							<div class="buttonContent">
								<button type="button" class="close">取消</button>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</form>
	</div>
</body>
</html>
